<template>
	<div class="ornament" :style="{ backgroundImage: 'url(' + curLibrary.imgSrc + ')' }">
		<div class="webheart">
			<div class="bgblcok clearfix" :style="{ borderBottomColor: curLibrary.color }">
				<div class="bg2" :style="{ background: curLibrary.color }"></div>
				<div class="fl left">
					<p class="title">{{ cnTitle || curLibrary.name }}</p>
					<p class="title-el">{{ enTitle || curLibrary.enTitle }}</p>
				</div>
				<div class="fl right">
					<el-breadcrumb separator="/">
						<el-breadcrumb-item v-for="(v, i) in navList" :key="i">
							<span v-if="i == navList.length - 1">{{ v.meta.title }}</span>
							<router-link v-else :to="newPath(v)">
								{{ v.meta.title }}
							</router-link>
						</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { LIBRARY } from '@/utils/config.js';
import homeConfig from '@/mixins/homeConfig';
export default {
	mixins: [homeConfig],
	data() {
		return {
			type: '',
			curLibrary: {},
			navList: [],
			cnTitle: '',
			enTitle: ''
		};
	},
	computed: {
		newPath() {
			return function (v) {
				let queryMode = this.$route.query.queryMode || 1;
				if (v.meta.hasOwnProperty('courseId')) {
					return v.path + '?courseId=' + this.$store.getters.courseId + '&queryMode=' + queryMode;
				}
				return v.path + '?queryMode=' + queryMode;
			};
		}
	},
	watch: {
		$route() {
			this.init();
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.type = this.$route.meta.type;
			this.curLibrary = LIBRARY.filter((v) => v.type == this.type)[0];
			this.$store.commit('SETLIBRARY', this.curLibrary);
			this.navList = this.$route.matched.filter((v) => v.meta && v.meta.title);
			this.navList.forEach((v) => {
				let { title, code } = v.meta;
				if (code) {
					v.meta.title = this.showModuleName(code) || title;
					this.cnTitle = v.meta.title;
					this.enTitle = this.showModuleEnName(code);
				}
			});
			this.setRoute();
		},
		setRoute() {
			this.$route.matched.forEach((v) => {
				if (v.meta.dataType == 1) {
					v.meta.title = this.$store.getters.courseTitle;
				}
				if (v.meta.dataType == 2) {
					v.meta.title = this.$store.getters.knowledgeName;
				}
			});
		}
	}
};
</script>
<style scoped lang="scss">
.ornament {
	position: relative;
	width: 100%;
	height: 150px;
	background-size: cover;
	background-position: center;
	.webheart {
		height: 100%;
		position: relative;
	}
	.bgblcok {
		position: absolute;
		bottom: -30px;
		left: 0;
		min-width: 510px;
		height: 0;
		color: #fff;
		border-bottom: 70px solid #0659a7;
		border-right: 70px solid transparent;
		.bg2 {
			position: absolute;
			left: -300px;
			bottom: -70px;
			width: 300px;
			height: 70px;
			background: #0659a7;
		}
		.left {
			margin-top: 10px;
			border-right: 1px solid rgba(255, 255, 255, 0.6);
			padding-right: 20px;
			.title {
				font-size: 24px;
				font-weight: 900;
			}
		}
		.right {
			margin-top: 6px;
			padding-left: 20px;
			height: 60px;
		}
	}
}
@media screen and (max-width: 1400px) {
	.ornament .bgblcok .left {
		margin-left: 20px;
	}
}
</style>
<style scoped>
.ornament >>> .el-breadcrumb {
	margin-top: 22px;
}
.ornament >>> .el-breadcrumb__separator {
	color: rgba(255, 255, 255, 0.6);
}
.ornament >>> .el-breadcrumb__inner a,
.ornament >>> .el-breadcrumb__inner.is-link {
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 10em;
	display: inline-block;
}
.ornament >>> .el-breadcrumb__inner a:hover {
	color: rgba(255, 255, 255, 0.6);
}
.ornament >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
.ornament >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
	color: rgba(255, 255, 255, 0.5);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 10em;
	display: inline-block;
}
</style>
